<template>
  <div class="controll show-more">
    <a v-if="showAll" class="button is-small" v-bind:class="{'is-active':selected===undefined}" @click="onInput(undefined)">全部</a>
    <a v-for="opt in opts" class="button is-small" v-bind:class="{'is-active':opt.value===selected}" :disabled="opt.disabled" @click="onInput(opt.value)">{{opt.label}}
    </a>
  </div>
</template>
<script>
export default {
  props: {
    value: {},
    options: [Array, Object],
    showAll: {
      type: Boolean,
      default: true
    }
  },
  data: function () {
    return {
      selected: this.value
    }
  },
  methods: {
    onInput: function (value) {
      this.selected = value
      this.$emit('input', value)
      this.$emit('change', value)
    }
  },
  computed: {
    opts: function () {
      if (!Array.isArray(this.options)) {
        return Object.keys(this.options).map((k) => {
          return {
            label: k,
            value: this.options[k]
          }
        })
      } else {
        return this.options.map((o) => {
          if (typeof o !== 'object') {
            return {
              label: o.toString(),
              value: o
            }
          }
          return o
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.form-group {
  .controll {
    height: 1.8em;
    overflow-y: hidden;
    .button {
      margin: 0 0 2.5px 5px
    }
  }
  .controll.show-more {
    height: auto;
  }
}
</style>
